<template>
  <div class="Kuweishezhi">
    <div class="sTop">
      &nbsp;&nbsp;&nbsp;&nbsp;仓库：<el-select
        v-model="valueRepository"
        size="small"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;库位：<el-select
        v-model="valuePosition"
        size="small"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;物料名称：<el-input
        placeholder="请输入物料名称"
        v-model="input"
        size="small"
        clearable
      ></el-input>
      &nbsp;<el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        class="button1 detail"
        >查询</el-button
      >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-refresh-right"
        class="button1 rePassword"
        >重置</el-button
      >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        class="button2 addUser"
        @click="centerDialogVisible2 = true"
        >新增库位</el-button
      >
    </div>

    <!-- 库位状态颜色 -->
    <div class="statusColor">
      <div style="background-color: #a7a7a754;">空闲</div>
      <div style="background-color: #65bfe3ab;">正常</div>
      <div style="background-color: #3acfba8c;">饱和</div>
      <div style="background-color: #ff8d8d5e;">超标</div>
    </div>
    <!-- 库位 -->
    <el-row :gutter="20">
      <el-col :span="8" v-for="(v, i) in tableData" :key="i">
        <div
          class="grid-content bg-purple"
          :class="
            (v.current / v.max) * 100 < 25
              ? 'free'
              : (v.current / v.max) * 100 < 60
              ? 'normal'
              : (v.current / v.max) * 100 < 85
              ? 'full'
              : 'over'
          "
        >
          <div
            style="padding-top: 3%; margin-bottom: 12%; font-weight: bolder;color:white;"
          >
            <span style="margin-left: 3%;">{{ v.storageName }}</span>
            <span style="float:right; margin-right: 10%;"
              >库存：{{ (v.current / v.max) * 100 + '%' }}</span
            >
          </div>
          <div class="grennDiv">
            <div
              style="float:left; margin-right: 1.5%; border-radius: 4px; margin-left: 2%;"
              @click="getQRcode(v.storageId)"
              >库位二维码</div
            >
            <div
              style="float:left; margin-right: 1.5%%; border-radius: 4px;"
              @click="handleEdit(v)"
              >查看存储物料</div
            >
            <div
              style="float:right; margin-right: 1.5%; border-radius: 4px;"
              @click="handleDelete(v.storageId)"
              >删除</div
            >
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 新增库位 -->
    <el-dialog
      title="新增库位"
      :visible.sync="centerDialogVisible2"
      width="30%"
      center
    >
      <el-form
        :model="insertOneArr"
        ref="insertOneArr"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="库位名称" prop="storageName">
          <el-input
            type="storageName"
            v-model="insertOneArr.storageName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" prop="partId">
          <el-select v-model="insertOneArr.entrepotName" placeholder="请选择">
            <el-option
              v-for="item in repositoryArr"
              :key="item.entrepotId"
              :label="item.entrepotName"
              :value="item.entrepotName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料编号" prop="materialId">
          <!-- <el-input
            type="materialId"
            v-model="insertOneArr.materialId"
            autocomplete="off"
          ></el-input> -->
          <el-select v-model="managerInformation.materialId">
            <el-option
              v-for="(item, index) in materialList"
              :key="index"
              :value="item.materialId"
              :label="item.materialName"
            ></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="已被使用空间" prop="current">
          <el-input
            type="current"
            v-model.number="insertOneArr.current"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="最大存储空间" prop="max">
          <el-input
            type="max"
            v-model.number="insertOneArr.max"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户信息 -->
    <el-dialog
      title="物料信息"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form
        :model="managerInformation"
        ref="managerInformation"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="库位名称" prop="storageName">
          <el-input
            type="storageName"
            v-model="managerInformation.storageName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" prop="partId">
          <el-select
            v-model="managerInformation.entrepotName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in repositoryArr"
              :key="item.entrepotId"
              :label="item.entrepotName"
              :value="item.entrepotName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料编号" prop="materialId">
          <el-input
            type="materialId"
            v-model="managerInformation.materialId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="已被使用空间" prop="current">
          <el-input
            type="current"
            v-model.number="managerInformation.current"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="最大存储空间" prop="max">
          <el-input
            type="max"
            v-model.number="managerInformation.max"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除用户对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <i class="el-icon-warning"></i><span>确认删除此库位吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteManager">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 二维码对话框 -->
    <el-dialog
      title="库位二维码"
      :visible.sync="dialogVisible2"
      width="30%"
      class="QRcode"
    >
      <el-image
        :src="QRcodeURL"
        fit="fill"
        style="width:100%;height:100%;"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
import repository from '@/api/repository.js';
export default {
  data() {
    return {
      valueRepository: '', //当前仓库选择的option
      valuePosition: '', //当前库位选择的option
      userStatus: '', //当前点击用户的状态status
      input: '',
      storageId: '', //删除用的库位id
      pageNow: 1 /* 当前页数 */,
      pageNumber: 50 /* 总页数 */,
      pageShow: 5 /* 每页显示个数 */,
      QRcodeURL: '', //二维码网址
      centerDialogVisible: false,
      dialogVisible: false,
      dialogVisible2: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      repositoryArr: [], //仓库数组
      managerArr: [], //修改用数组
      insertOneArr: {
        current: '',
        max: '',
        entrepotName: '',
        storageName: '',
        materialId: ''
      }, //添加用对象
      tableData: [], //渲染到表格的数据
      options: [
        {
          //select 选项
          value: '1',
          label: '自家仓库'
        },
        {
          value: '2',
          label: '电力公司仓库'
        }
      ],
      value: '', //select当前选定的 option
      managerInformation: {}, //用于修改
      rules: {}
    };
  },
  created() {
    //获取仓库列表
    repository.getRepository(1, 10).then(res => {
      this.repositoryArr = res.data.data.list;
      /* console.log(res); */
    });
    //获取库位列表
    repository.getPosition().then(res => {
      /* console.log(res); */
      this.managerArr = res.data.data.list;
      this.pageNumber = res.data.data.total;
      this.tableData = this.managerArr;
    });
    this.getMaterial();
  },
  methods: {
    /* 修改 */
    handleEdit(v) {
      this.centerDialogVisible = true;
      this.managerInformation = v;
    },

    /*修改更新数据*/
    update() {
      this.centerDialogVisible = false;
      /* yuangong.updateUser(this.managerInformation).then(res => {
          console.log(res);
          location.reload()
        }) */
    },
    /*删除管理员*/

    handleDelete(i) {
      this.dialogVisible = true;
      this.storageId = i;
    },
    /*删除管理员*/
    deleteManager() {
      this.dialogVisible = false;
      repository.deletePosition(this.storageId).then(res => {
        /* console.log(res); */
        location.reload();
      });
    },
    //添加用户
    addUser() {
      this.centerDialogVisible2 = false;
      repository.addPosition(this.insertOneArr).then(res => {
        /* console.log(res);
          console.log(this.insertOneArr); */
        location.reload();
      });
    },
    //请求库位二维码
    getQRcode(id) {
      this.dialogVisible2 = true;
      repository.getQRCode(id).then(res => {
        this.QRcodeURL = res.config.baseURL + res.config.url;
        /* console.log(res);
          console.log(this.QRcodeURL); */
      });
    },
    getMaterial() {
      this.axios({
        url: `/material/materialList/${2}/${10}`
      }).then(res => {
        // console.log(res);
        this.materialList = res.data.data.list;
        this.total = res.data.data.total;
      });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.Kuweishezhi {
  padding-bottom: 10px;
  background-color: white;
}
.el-input {
  width: 200px;
  margin-right: 10px;
}
.sTop {
  padding-top: 20px;
  font-size: 14px;
  margin-bottom: 40px;
}
.el-table thead {
  background-color: #f5f7fa;
}
.has-gutter .is-leaf .cell {
  text-align: center;
  padding-left: 10px;
  width: 150px;
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.el-icon-warning {
  color: orange;
  font-size: 20px;
  margin-right: 5px;
}

.sTop >>> .button1 {
  text-align: center;
  width: 78px;
  height: 32px;
}
.sTop >>> .button2 {
  text-align: center;
  width: 118px;
  height: 32px;
}
.sTop >>> .button1,
.button2 {
  font-size: 14px;
}
.is-plain {
  width: 80px;
}
.dialog-footer .el-button--default,
.el-button--primary {
  width: 74px;
  height: 40px;
}
.datepicker {
  height: 40px;
  width: 405px;
  margin-bottom: 20px;
  padding-left: 30px;
}
.sexselect {
  width: 400px;
  height: 40px;
  padding-left: 100px;
}
.datepicker .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 200px;
}
.el-select >>> .el-input {
  width: 200px;
}
.el-row {
  padding: 0 20px;
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
  height: 100%;
  margin-bottom: 20px;
  padding-bottom: 0px;
}
.el-col-6 {
  width: 20%;
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  height: 100%;
  border: 2px solid rgba(185, 185, 185, 0.5);
  background: white;
}
.statusColor {
  margin-bottom: 50px;
  height: 30px;
  width: 100%;
}
.statusColor div {
  display: inline-block;
  width: 5%;
  height: 100%;
  border-radius: 4px;
  height: 100%;
  margin-right: 10px;
  text-align: center;
  padding: 1px 5px;
  font-size: 13px;
  color: white;
  line-height: 30px;
}
.statusColor div:first-child {
  margin-left: 20px;
  border: 0.5px solid #b9b9b9;
  color: black;
}
.grennDiv {
  height: 40px;
  padding-bottom: 4%;
}
.grennDiv::after {
  clear: both;
  display: block;
}
.grennDiv div {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.3);
  border: rgba(211, 211, 211, 0.5);
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding: 0 3%;
  cursor: pointer;
  color: rgb(151, 0, 0);
}
.free {
  background-color: #a7a7a754;
}
.normal {
  background-color: #65bfe3ab;
}
.full {
  background-color: #3acfba8c;
}
.over {
  background-color: #ff8d8d5e;
}
</style>
